<template>
	<view class="box">
		<!-- 导航 -->
		<!-- <u-navbar :is-back="true" :title="title" :height="navHeight" title-color="#3F3F3F" :title-bold="true" :background="background" :border-bottom="false"></u-navbar> -->
		<!-- end -->
		<view class="select">
			<!-- 轮播图开始 -->
			<view><u-swiper :list="list" border-radius="0" bg-color="#ffffff" height="386"></u-swiper></view>
			<!-- 轮播图结束 -->
			<!-- 服务内容 -->
			<view style="width: 100%;margin-top: 12rpx;">
				<!-- 选择服务 -->
				<view style="width: 96%;margin: 0 auto;">
					<scroll-view scroll-x="true" :scroll-left="scrollLeft" enhanced="true" show-scrollbar="false" scroll-with-animation="true" style="white-space: nowrap;display: flex;">
						<view
							v-for="(item, index) in serverList"
							:key="index"
							:class="item.amount == selectServer ? 'isSelect' : 'noSelect'"
							@click="chekServer(item,index)"
							style="width: 280rpx;padding: 10rpx;border-radius: 8rpx;margin: 0 10rpx;margin-top: 10rpx;display: inline-block;"
						>
							<view style="font-size: 28rpx;color: #323332;margin-bottom: 8rpx;font-weight: 500;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ item.name }}</view>
							<view style="display: flex;width: 100%;justify-content: space-between;">
								<view style="color: #999999;font-size: 24rpx;line-height: 52rpx;">{{ item.adviceContent==""?"最低":'建议'}}</view>
								<view style="padding: 0 8rpx; color: #F84914; height: 52rpx;line-height: 52rpx;text-align: center; background: #FFECE7;border-radius: 4rpx;">
									<text style="font-size: 24rpx;">￥</text>
									<text style="font-size: 36rpx;">{{ item.reducedPrice }}</text>
								</view>
							</view>
							<view style="display: flex;width: 100%;color: #999999;margin-top: 8rpx;">
								<view style="font-size: 22rpx;width: 50%;">{{ item.adviceContent}}</view>
								<view style="width: 50%;text-align: right;font-size: 22rpx;">
									<text>原价</text>
									<text style="text-decoration: line-through;">{{ item.marketPrice }}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 选择服务结束 -->
				<!-- 介绍 -->
				<view style="width: 92%;margin: 0 auto;line-height: 80rpx;display: flex;color: #999999;font-size: 23rpx;border-bottom: 1rpx solid #F9FAFB;">
					<view style="width: 50%;">
						已为
						<text style="color: #333333;">{{totalCommit?totalCommit:0}}</text>
						个家庭提供服务
					</view>
					<view style="width: 50%;text-align:right;">{{explains?explains:""}}</view>
				</view>
				<!-- 介绍结束 -->
				<!-- 服务保障 -->
				<view style="width: 92%; margin: 0 auto;line-height: 80rpx;font-size: 26rpx;color: #6F6F6F;display: flex;" @click="showAdvantage = true">
					<view style="display: flex;margin-right: 10rpx;width: 90%;" v-for="(item, index1) in advantage" :key="index1">
						<view style="width: 24rpx;line-height: 24rpx;height: 24rpx;text-align: center;background-color: #30A5FF;border-radius: 20rpx;margin-top: 28rpx;">
							<u-icon name="checkbox-mark" size="20" color="#fff"></u-icon>
						</view>
						<view style="margin-left: 8rpx;">{{ item }}</view>
					</view>
					<view style="width: 10%;text-align: right;"><image src="../../static/icon/jian.png" mode="" style="width: 14rpx;height: 24rpx;margin-top: 4rpx;"></image></view>
				</view>
				<u-popup mode="bottom" v-model="showAdvantage">
					<scroll-view style="max-height: 900rpx;" lower-threshold="10"  scroll-y="true" class="scroll-Y">
						<view style="width: 100%;">
							<!-- https://beedao.oss-cn-beijing.aliyuncs.com/e3a7ee8c03804340882ea703ce13b25b.png -->
							<image v-for="(bitem,bindex) in ensures" :key="bindex" style="width: 100%;" :src="bitem" mode="widthFix"></image>
						</view>
						<view style="width: 100%;position: absolute;top: 0;left: 0;">
							<view class="width: 100%;position: relative;">
								<view style="width: 100%;text-align: center;font-size: 30rpx;font-weight: bold;line-height: 80rpx;">服务保障</view>
								<image
									@click="showAdvantage = false"
									style="position: absolute;top: 26rpx;right: 24rpx;width: 24rpx;height: 24rpx;position: absolute;"
									src="https://beedao.oss-cn-beijing.aliyuncs.com/94babc7b1aa54980a1abb68a5319c31f.png"
									mode=""
								></image>
							</view>
						</view>
					</scroll-view>
				</u-popup>
				<!-- 服务保障结束 -->
				<!-- 优惠劵 -->
				<view
					style="padding: 10rpx 0;width: 92%; margin: 0 auto;line-height: 80rpx;font-size: 26rpx;color: #6F6F6F;display: flex;border-bottom: 10rpx solid #F9FAFB;border-top: 10rpx solid #F9FAFB;"
					@click="getCouponList"
					v-if="ycouponList.length > 0"
				>
					<view style="display: flex;margin-right: 10rpx;width: 95%;">
						<view style="width: 15%;">优惠劵</view>
						<view style="width: 85%;">
							<u-row gutter="16">
								<u-col span="6" v-for="(item, ite) in ycouponList" :key="ite" v-if="ite < 2">
									<view
									 :style="{ 'background-color': item.counponsGenre == '0' ? '#FFECE7' : '#403C3B' }"
									 style="display: flex;margin: 10rpx 20rpx;" v-if="item.counponsType == 0">
										<view
										:style="{ 'color': item.counponsGenre == '0' ? '#F84914' : '#F9D0A4' }"
										 style="width: 40%;line-height: 70rpx;text-align: center;">
											<text style="font-size: 22rpx;">￥</text>
											<text style="font-size: 36rpx;">{{ item.price }}</text>
										</view>
										<view style="width: 60%;line-height: 30rpx;">
											<view
											 :style="{ 'color': item.counponsGenre == '0' ? '#333333' : '#F9D0A4' }"
											 style="width: 100%;line-height: 35rpx;font-size: 11px;">满{{ item.limitation }}可用</view>
											<view
											:style="{ 'background-color': item.counponsGenre == '0' ? '#F84914' : '#F9D0A4',
											 'color': item.counponsGenre == '0' ? '#fff' : '#B15C00' 
											 }"
												style="display: flex;justify-content: center; text-align: center;line-height: 36rpx;font-size: 22rpx;color: #fff;width: 90%;"
											>
												<text>立即领取</text>
												<image src="../../static/icon/jian.png" mode="" style="width: 4px;height: 8px;margin-left: 7rpx;margin-top: 10rpx;"></image>
											</view>
										</view>
									</view>
									<view
									 :style="{ 'background-color': item.counponsGenre == '0' ? '#FFECE7' : '#403C3B' }"
									 style="display: flex;margin: 10rpx 20rpx;" v-else>
										<view
										 :style="{ 'color': item.counponsGenre == '0' ? '#F84914' : '#F9D0A4' }"
										 style=" width: 40%;line-height: 70rpx;text-align: center;">
											<!-- <text style="font-size: 22rpx;">￥</text> -->
											<text style="font-size: 32rpx;">{{item.fmtDiscountStr}}</text>
										</view>
										<view style="width: 60%;line-height: 30rpx;">
											<view
											 :style="{ 'color': item.counponsGenre == '0' ? '#333333' : '#F9D0A4' }"
											 style="width: 100%;line-height: 35rpx;font-size: 11px;">无门槛使用</view>
											<view
											:style="{ 'background-color': item.counponsGenre == '0' ? '#F84914' : '#F9D0A4',
											 'color': item.counponsGenre == '0' ? '#fff' : '#B15C00' }"
												style="display: flex;justify-content: center; text-align: center;line-height: 36rpx;font-size: 22rpx;color: #fff;width: 90%;"
											>
												<text>立即领取</text>
												<image src="../../static/icon/jian.png" mode="" style="width: 4px;height: 8px;margin-left: 7rpx;margin-top: 10rpx;"></image>
											</view>
										</view>
									</view>
									
								</u-col>
							</u-row>
						</view>
					</view>
					<view style="width: 5%;text-align: right;"><image src="../../static/icon/jian.png" mode="" style="width: 14rpx;height: 24rpx;margin-top: 36rpx;"></image></view>
				</view>
				<u-popup mode="bottom" v-model="showCoupon">
					<scroll-view style="white-space: nowrap;display: flex;" 
					:style="{ height: comHeight}"
					lower-threshold="10" @scrolltolower="scrolltolower" scroll-y="true" class="scroll-Y">
						<view style="width: 100%;padding-top: 24rpx;text-align: center;position: relative;" @click="showCoupon = false">
							<image
								style="height: 60rpx;width: 60%;margin: 0 auto;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/efb3ad66cb294587bdff5b67a779ecbf.png"
								mode=""
							></image>
							<view style="position: absolute;top: 24rpx;left: 0; width: 100%;text-align: center;font-size: 32rpx;font-weight: bold;line-height: 60rpx;">
								领取优惠劵
							</view>
							<image					
								style="position: absolute;top: 32rpx;right: 24rpx;width: 24rpx;height: 24rpx;position: absolute;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/94babc7b1aa54980a1abb68a5319c31f.png"
								mode=""
							></image>
						</view>
						<view style="width: 92%;margin:0 auto;padding-top: 20rpx;">
							<view v-if="memberCoupon.length > 0">
								<view style="width: 100%;display: flex;padding:30rpx 0 ;">
									<view style="line-height: 30rpx;font-size: 30rpx;">会员专属红包</view>
									<image style="width: 60rpx;height: 30rpx;margin-left: 12rpx;"
										src="https://beedao.oss-cn-beijing.aliyuncs.com/d06bdc674bbf4c4f983dcba18cccb02e.png">										
									</image>
								</view>
								<view style="" v-for="(item, index) in memberCoupon" :key="index">
									<view class="card_bj" style="position: relative;">
										<image style="height:176rpx ;width: 100%;" src="https://beedao.oss-cn-beijing.aliyuncs.com/c0c2db435e6e4a50bd024b97133fd290.png"></image>
										<view style="position: absolute;left: 0;top: 0;width: 100%;">
											<view style="width: 100%;margin: auto;overflow: hidden;">
												<!-- 满减卷 -->
												<view style="width:30% ;float: left;text-align: center;" v-if="item.counponsType == 0"> 
													<view style="font-size:56rpx ;font-weight: bold;color: #F9D0A4;padding-top: 28rpx;">
														<text style="font-size: 28rpx;">￥</text>
														{{ item.price }}
													</view>
													<view style="font-size:24rpx ;color: #F9D0A4;line-height: 48rpx;">满{{ item.limitation }}元可用</view>
												</view>
												<!-- 折扣卷 -->
												<view style="width:30% ;float: left;text-align: center;" v-else>
													<view style="font-size:56rpx ;font-weight: bold;color: #F9D0A4;padding-top: 28rpx;">								
														{{item.fmtDiscountStr}}
													</view>
													<view style="font-size:24rpx ;color: #F9D0A4;line-height: 48rpx;">无门槛使用</view>
												</view>
												<!-- 已领取 -->
												<view style="width: 70%;float: right;" v-if="item.haveReceive!==0">
													<view style="width: 93%;margin: auto;display: flex;">
														<view style="width: 90%;">
															<view class="card_text" style="color: #F9D0A4;font-weight: bold; font-size:30rpx ;padding: 36rpx 10rpx 12rpx 20rpx;">{{item.fmtName}}</view>
															<view class="card_text"
															:style="{ 'line-height': item.limitType!== 1 && item.limitType !== 3 ? '86rpx' : '48rpx' }"
															style="color: #6F6F6F; font-size:22rpx ;color: #FFFFFF;padding: 0rpx 0rpx 0rpx 20rpx;">
																有效期至{{ item.endDatetime }}
															</view>
															<view class="card_text" style="padding: 0rpx 0rpx 0rpx 20rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #FFFFFF;font-size: 20rpx;line-height: 34rpx;">
																{{item.activityType == 1 || item.activityType == 3 ? '#仅限'+ item.activityName+'活动商家使用#':''}}
															</view>
														</view>
														<view style="color: #FFFFFF; text-align: center;width: 5%;margin-top: 30rpx;">已<br />领<br />取</view>
													</view>
												</view>
												<!-- 未领取 -->
												<view style="width: 70%;float: right;" v-else @click="userInfo.member ? goGetCoupon(item,index,1): goMember()">
													<view style="width: 93%;margin: auto;display: flex;">
														<view style="width: 90%;">
															<view
																class="card_text"
																style="color: #F9D0A4;font-weight: bold; font-size:30rpx ;padding: 36rpx 16rpx 12rpx 20rpx;"
															>
																{{ item.fmtName }}
															</view>
															<view class="card_text"
															:style="{ 'line-height': item.limitType!== 1 && item.limitType !== 3 ? '86rpx' : '48rpx' }"
															style="color: #6F6F6F; font-size:22rpx ;color: #FFFFFF;padding: 0rpx 0rpx 0rpx 20rpx;">
																有效期至{{ item.endDatetime }}
															</view>
															<view class="card_text" style="padding: 0rpx 0rpx 0rpx 20rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #FFFFFF;font-size: 20rpx;line-height: 34rpx;">
																{{item.activityType == 1 || item.activityType == 3 ? '#仅限'+ item.activityName+'活动商家使用#':''}}
															</view>
														
														</view>
														<view v-if="userInfo.member" style="color: #FFFFFF; text-align: center;width: 5%;margin-top: 10rpx;">
															立
															<br />
															即
															<br />
															领
															<br />
															取
														</view>
														<view  v-else style="width: 6%;display: flex;align-items: center;justify-content: center;">
															<view  style="color: #FFFFFF; text-align: center;height: 100rpx;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;">
																去
																<br />
																开
																<br />
																通
															</view>
														</view>
													</view>
												</view>
												
											</view>
										</view>
									</view>
								</view>
							</view>
							
							<view style="" v-for="(item, index) in couponList" :key="index">
								<view class="card_bj" style="position: relative;" @click="item.haveReceive!==0?'':goGetCoupon(item,index,2)">
									<image style="height:176rpx ;width: 100%;" :src="item.haveReceive==0?backImg.gimg:backImg.img"></image>
									<view style="position: absolute;left: 0;top: 0;width: 100%;">
										<view style="width: 100%;margin: auto;overflow: hidden;">
											<!-- 满减卷 -->
											<view style="width:30% ;float: left;text-align: center;" v-if="item.counponsType == 0"> 
												<view style="font-size:56rpx ;font-weight: bold;color: #fff;padding-top: 28rpx;">
													<text style="font-size: 28rpx;">￥</text>
													{{ item.price }}
												</view>
												<view style="font-size:24rpx ;color: #fff;line-height: 48rpx;">满{{ item.limitation }}元可用</view>
											</view>
											<!-- 折扣卷 -->
											<view style="width:30% ;float: left;text-align: center;" v-else>
												<view style="font-size:56rpx ;font-weight: bold;color: #fff;padding-top: 28rpx;">								
													{{item.fmtDiscountStr}}
												</view>
												<view style="font-size:24rpx ;color: #fff;line-height: 48rpx;">无门槛使用</view>
											</view>
											<!-- 已领取 -->
											<view style="width: 70%;float: right;" v-if="item.haveReceive!==0">
												<view style="width: 93%;margin: auto;display: flex;">
													<view style="width: 90%;">
														<view class="card_text" style="color: #333333;font-weight: bold; font-size:30rpx ;color: #3F3F3F;padding: 36rpx 10rpx 12rpx 20rpx;">{{item.fmtName}}</view>
														<view class="card_text"
														:style="{ 'line-height': item.limitType!== 1 && item.limitType !== 3 ? '86rpx' : '48rpx' }"
														style="color: #6F6F6F; font-size:22rpx ;color: #3F3F3F;padding: 0rpx 0rpx 0rpx 20rpx;">
															有效期至{{ item.endDatetime }}
														</view>
														<view class="card_text" style="padding: 0rpx 0rpx 0rpx 20rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #979797;font-size: 20rpx;line-height: 34rpx;">
															{{item.activityType == 1 || item.activityType == 3 ? '#仅限'+ item.activityName+'活动商家使用#':''}}
														</view>
													</view>
													<view style="color: #FF7D55; text-align: center;width: 5%;margin-top: 30rpx;">已<br />领<br />取</view>
												</view>
											</view>
											<!-- 未领取 -->
											<view style="width: 70%;float: right;" v-else >
												<view style="width: 93%;margin: auto;display: flex;">
													<view style="width: 90%;">
														<view
															class="card_text"
															style="color: #333333;font-weight: bold; font-size:30rpx ;color: #3F3F3F;padding: 36rpx 16rpx 12rpx 20rpx;"
														>
															{{ item.fmtName }}
														</view>
														<view class="card_text"
														:style="{ 'line-height': item.limitType!== 1 && item.limitType !== 3 ? '86rpx' : '48rpx' }"
														style="color: #6F6F6F; font-size:22rpx ;color: #3F3F3F;padding: 0rpx 0rpx 0rpx 20rpx;">
															有效期至{{ item.endDatetime }}
														</view>
														<view class="card_text" style="padding: 0rpx 0rpx 0rpx 20rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #979797;font-size: 20rpx;line-height: 34rpx;">
															{{item.activityType == 1 || item.activityType == 3 ? '#仅限'+ item.activityName+'活动商家使用#':''}}
														</view>
													
													</view>
													<view  style="color: #FF7D55; text-align: center;width: 5%;margin-top: 10rpx;">
														立
														<br />
														即
														<br />
														领
														<br />
														取
													</view>
												</view>
											</view>
											
										</view>
									</view>
								</view>
							</view>
							<view style="margin: 20rpx 0;">
								<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{ form.page < countPage ? '上滑加载更多' : '没有更多了' }}</u-divider>
							</view>
						</view>
					</scroll-view>
				</u-popup>
				<!-- 优惠劵结束 -->
				<u-sticky offset-top="0">
					<view style="width: 100%;background-color: #fff;padding-top: 14rpx;padding-bottom: 14rpx;">
						<view style="width: 100%;margin: 0 auto;line-height: 40rpx;">
							<u-row gutter="0" justify="center">
								<u-col span="4">
									<view @click="goSliding(formHeight.server, 1)" :class="selectBom == 1 ? 'addbold' : ''" style="text-align: center;line-height: 50rpx;">
										服务介绍
									</view>
									<view v-if="selectBom == 1" style="width: 60rpx;height: 6rpx;background-color: #FCC800;margin: 0 auto;margin-bottom: ;"></view>
								</u-col>
								<u-col span="4">
									<view @click="goSliding(formHeight.instruction, 2)" :class="selectBom == 2 ? 'addbold' : ''" style="text-align: center;line-height: 50rpx;">
										费用说明
									</view>
									<view v-if="selectBom == 2" style="width: 60rpx;height: 6rpx;background-color: #FCC800;margin: 0 auto;margin-bottom: ;"></view>
								</u-col>
								<u-col span="4">
									<view @click="goSliding(formHeight.evaluation, 3)" :class="selectBom == 3 ? 'addbold' : ''" style="text-align: center;line-height: 50rpx;">
										用户评价
									</view>
									<view v-if="selectBom == 3" style="width: 60rpx;height: 6rpx;background-color: #FCC800;margin: 0 auto;margin-bottom: ;"></view>
								</u-col>
							</u-row>
						</view>
					</view>
				</u-sticky>
				<view style="width: 100%;" id="comment1">
					<view v-for="(item, index3) in introduces" :key="index3"><image :src="item" style="width: 100%; display:block;margin-top: -1rpx;" mode="widthFix"></image></view>
				</view>
				<view style="width:100%;" id="comment2">
					<view v-for="(item, index4) in feesDesc" :key="index4">
						<image :src="item" style="width: 100%; display:block;margin-top: -1rpx;" mode="widthFix"></image>
					</view>
				</view>
				<!-- 用户评价 -->
				<view class="introduce" id="comment3" style="padding-right: 0;padding-bottom: 0;">
					<view class="taocan" style="line-height: 70rpx;">
						<view class="taungou"><text style="font-size: 30rpx;font-weight: bold;margin-left: 10rpx;">用户评价</text></view>
						<view class="danbao" @click="goComments()">
							<view class="pingtai" style="margin-right: 12rpx;color: #A6A6A6;">{{ appraiseCount  ? appraiseCount : 0 }}条评论</view>
							<view class="pingtai"><image src="../../static/icon/aoo.png" mode="" style="width: 12rpx;height: 21rpx;margin-top: 4rpx;"></image></view>
						</view>
					</view>
				</view>
				<view v-for="(item, index) in appraiseList" :key="index" >
					<!-- <view class="introduce" style="border-bottom: 1px solid #F2F2F2;padding-top: 0;" @click="goDetail(item.appraiseId)"> -->
					<view @click="goDetail(item.appraiseId)" class="introduce" style="border-bottom: 1px solid #F2F2F2;padding-top: 0;">
						<view class="pjList">
							<view class="curser" style="width: 100%;">
								<image :src="item.portrait" mode=""></image>
								<view class="yonghu" style="width: 82%;">
									<view class="yonghu_nam">
										<view class="yonghu_mcs">{{ item.nickName }}</view>
										<view class="yonghu_data">{{ item.fmtCommentDatetime }}</view>
									</view>
								</view>
							</view>
						</view>
						<view style="display: flex;">
							<view class="">
								<u-rate
									size="28"
									:count="count"
									v-bind:value.sync="item.formatScore"
									inactive-icon="star-fill"
									:disabled="true"
									active-color="#FBB507"
									inactive-color="#E4E4E4"
								></u-rate>
								<!-- <text style="color: #FBB507;">{{ item.formatScore }}</text> -->
							</view>
							<view style="width: 2rpx;height: 18rpx;background: #A6A6A6;opacity: 1;margin: 10rpx 10rpx 0 10rpx;"></view>
							<view style="color: #C7C7C7;">{{item.entName}}</view>
						</view>
						<view v-if="item.comments" class="pingyu">{{ item.comments || '' }}</view>
						<view class="pircture" v-if="item.images && item.images.length>0">
							<view v-for="(ite, uin) in item.images" :key="uin" @click.stop="clickPreview(item.images, uin)"><image :src="ite" mode=""></image></view>
						</view>
					</view>
				</view>
				<!-- 用户评价结束 -->
			</view>
			<!-- 服务内容结束 -->
			<view
			 :style="{height:openGroup == 1?'106px':'66px'}"
			 style="width: 100%;">
				
			</view>
		</view>
		<!-- 底部操作兰 -->
		<view class="foot">
			<view v-if="openGroup == 1" @click="goAppointment" style="width: 100%;height: 80rpx;display: flex;align-items: center;background-color: #707070;justify-content: center;">
				<view style="line-height: 80rpx;">
					<text style="font-size: 34rpx;color: #FCC800;">1</text>
					<text style="font-size: 26rpx;color: #ffffff;">人拼团，邀请一人再优惠</text>
					<text style="font-size: 34rpx;color: #FCC800;">{{groupReduce}}元</text>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;margin-left: 36rpx;">
					<view style="border-bottom: 1rpx solid #FCC800;color: #FCC800;font-size: 26rpx;">发起拼团</view>
				</view>
			</view>
			<view style="width: 92%;margin: 0 auto;display: flex;align-items: center;justify-content: space-around;text-align: center;">
				<view style="height: 116rpx;width: 26%;">
					<view class="boxs">
						<image style="width: 36rpx;height:36rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/f41d9432958b4ef2997ea510f3d74b2e.png" mode=""></image>
						<button open-type="share" class="getCodeView"></button>
					</view>
			
					<view style="height: 36rpx;"><button open-type="share" style="color: #707070;" class="buttons">分享</button></view>
				</view>
				<view @click="goAppointment" class="call" style="width: 74%;" >立即预约</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			openGroup:0,
			groupReduce:"0",
			background: {
				backgroundColor: '#ffffff'
			},
			count: 5,
			textStyle: {
				color: '#272755'
			},
			backImg: {
				gimg: 'https://beedao.oss-cn-beijing.aliyuncs.com/aea18911a6d14cd3adf753ceb261a190.png',
				img: 'https://beedao.oss-cn-beijing.aliyuncs.com/d966eed886cc43a38845e04af918d0f8.png'
			},
			title: '',
			advantage: ['每日测温', '工具消毒', '订单保险', '极速上门'],
			list: [],
			serverList: [],
			showAdvantage: false, //显示商家优势
			showCoupon: false, //显示优惠劵领取列表
			ycouponList: [], //不更改的优惠劵
			couponList: [], //优惠劵领取列表
			memberCoupon:[],//会员优惠券
			comHeight: 0, //bode高度px
			navHeight: 0, //状态栏高度px
			offHeight: 0, //吸顶高度rpx
			formHeight: {
				server: 0,
				instruction: 0,
				evaluation: 0
			}, //记录滑动的位置
			form: {
				page: 1,
				id: 0,
				size: 10
			},
			countPage: 0,
			selectServer: 1,
			selectBom: 1,
			appraiseList: [], //评价列表
			total: 0 ,//总条数
			businessId:"",
			totalCommit:0,//提供服务数量
			ensures:[],//保障数组
			introduces:[],//服务介绍图片
			feesDesc:[],//费用说明图片
			chargeType:0,//服务类型
			appraiseCount:0,//评论数量
			explains:"",//服务保障
			userId:'',//用户id
			enterpriseId:'',//是不是在商家主页进入
			bisOptionsId:'',//
			userInfo:{},//用户信息
			scrollLeft:0,
		};
	},
	onLoad(option) {
		this.businessId=option.businessId;
		this.enterpriseId=option.enterpriseId;
		this.form.id=this.businessId;
		this.gethomeInfo();// 获取主页信息
		var userInfo = JSON.parse(uni.getStorageSync('userinfo'));
		this.getUserInfo();
		this.userId = userInfo.userId;
		//解决andriod自适应宽度不准确问题
		var that=this;
		uni.getSystemInfo({
			success: res => {
				that.comHeight = (res.screenHeight/2) + 'px';
			},
		})
	},
	methods: {
		// 获取用户信息
		getUserInfo(){
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user/info'
			};
			let data = {};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == "200") {
					_this.userInfo=res.data.userInfoVO;
			
				}
			});
			
		},
		// 选中规格服务
		chekServer(item,index){
			this.selectServer = item.amount;
			this.bisOptionsId = item.bisOptionsId;
			this.checkCor(index);
		},
		checkCor: function(index) {
			if (index > 1) {
				this.scrollLeft = 200;
			} else {
				this.scrollLeft = 0;
			}
		},
		// 获取主页信息
		gethomeInfo(){
			var _this = this;
			let opts = {
				way: true,
				method: 'post',
				url: 'business/home'
			};
			let data ={
				businessId:_this.businessId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					_this.title=res.data.name;
					uni.setNavigationBarTitle({
					  title: _this.title+'下单'
					});
					var arr=res.data.banners;
					if(arr.length > 0){
						arr.forEach((item)=>{
							_this.list.push({
								image:item
							})
						})
					}
					var array=res.data.optionsList;
					if(res.data.chargeType == 3){
						array.forEach((item)=>{
							item.amount=item.specificId
						})
					}	
					
					_this.explains=res.data.explains;
					_this.chargeType=res.data.chargeType;
					_this.chargeType=res.data.chargeType;
					_this.serverList=array;
					_this.selectServer=_this.serverList[0].amount;
					_this.bisOptionsId = array[0].bisOptionsId;
					_this.totalCommit=res.data.totalCommit;
					_this.ensures=res.data.ensures;
					_this.ycouponList=res.data.couponsList;
					_this.introduces=res.data.introduces;//服务介绍图片
					_this.feesDesc=res.data.feesDesc;//费用说明图片
					_this.appraiseList=res.data.appraiseList;
					_this.appraiseCount=res.data.appraiseCount;
					_this.openGroup=res.data.openGroup;
					_this.groupReduce=res.data.groupReduce;
					
					_this.infoPage(); // 初始化页面
				} else {
					uni.showToast({
						title: res.message,
						mask: true,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// 去立即预约
		goAppointment(){
			var _this = this;
			let opts = {
				way: true,
				method: 'post',
				url: 'coupon/receive/business'
			};
			let data = {
				businessId:_this.businessId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					if(res.data.status == 1){
						uni.showToast({
							title: "已为您领取全部优惠劵",
							mask: true,
							icon: 'none',
							duration: 500
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:'./appointment?businessId='+_this.businessId+'&chargeType='+_this.chargeType+'&amount='+_this.selectServer+ '&enterpriseId=' + _this.enterpriseId+'&bisOptionsId=' +_this.bisOptionsId								
							})
						},500);	
					}else{
						uni.navigateTo({
							url:'./appointment?businessId='+_this.businessId+'&chargeType='+_this.chargeType+'&amount='+_this.selectServer+ '&enterpriseId=' + _this.enterpriseId+'&bisOptionsId=' +_this.bisOptionsId
						});
					}			
				} else {
					uni.showToast({
						title: res.message,
						mask: true,
						icon: 'none',
						duration: 2000
					});
				}
			});
			
		},
		// 去全部评论
		goComments(){
			uni.navigateTo({
				url:'./comments?businessId='+this.businessId
			})
		},
		// 去评论详情
		goDetail(appraiseId){
			uni.navigateTo({
				url:'./commentDetail?appraiseId='+appraiseId
			})
		},
		// 分享设置参数
		onShareAppMessage(res) {
			if (res.from === 'button') {			
			}
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'common/insertShareLog'
			};
			let data = {};
			this.http.httpTokenRequest(opts, data).then(res => {
				//分享日志，不需要处理
			});
			return {
				title: this.shopdetails.name,
				 path:'/pages/login/login?id='+this.userId+ '&businessId=' + this.businessId+"&jumpType="+8
			};
		},
		// 点击放大
		clickPreview(images, uin) {
			var imsList = images;
			uni.previewImage({
				current: uin,
				urls: imsList,
				indicator: 'default',
				loop: true
			});
		},
		// 所有评价
		allEvaluate() {
			uni.navigateTo({
				url: 'allEvaluate/allEvaluate?cateId=' + this.cateId + '&enterpriseId=' + this.enterpriseId
			});
		},
		// 去开通会员
		goMember() {
			uni.navigateTo({
				url: '/pageageA/member/meCenter'
			});
		},
		// 点击领取优惠劵
		goGetCoupon(item,index,type) {
			var _this = this;
			var index = index;
			let opts = {
				way: true,
				method: 'post',
				url: 'coupon/receive/ent'
			};
			let data = {
				couponId:item.couponsId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '领取成功',
						mask: true,
						icon: 'none',
						duration: 2000
					});
					if(type == 1){
						_this.memberCoupon[index].haveReceive=1;
					}else{
						_this.couponList[index].haveReceive=1;
					}
					
				} else {
					uni.showToast({
						title: res.message,
						mask: true,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// 触底事件
		scrolltolower() {
			if (this.form.page < this.countPage) {
				this.form.page = this.form.page + 1;
				this.toCouponList();
			}
		},
		// 开始请求优惠劵列表
		toCouponList() {
			var _this = this;
			let opts = {
				way: true,
				method: 'post',
				url: 'business/home/coupons'
			};
			let data = _this.form;
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					var arr=res.data.generalgCoupon;
					if(arr.length > 0){
						arr.forEach((item)=>{
							item.endDatetime=item.endDatetime.substring(0, 10)
							item.startDatetime=item.startDatetime.substring(0, 10)
						})
					}
					
					var array=res.data.memberCoupon;
					if(array.length > 0){
						array.forEach((item)=>{
							item.endDatetime=item.endDatetime.substring(0, 10)
							item.startDatetime=item.startDatetime.substring(0, 10)
						})
					}
					
					_this.couponList = arr;
					_this.memberCoupon = array;
					_this.countPage = res.data.pages;
				} else {
					uni.showToast({
						title: res.message,
						mask: true,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		//点击去请求优惠劵列表
		getCouponList() {
			this.form.page = 1;
			this.countPage = 0;
			this.couponList = [];
			this.memberCoupon = [];
			this.toCouponList();
			this.showCoupon = true;
		},
		// 初始化页面
		infoPage() {
			var that = this;	  
			setTimeout(()=>{
				const query1 = uni.createSelectorQuery().in(that);
				query1
					.select('#comment1')
					.boundingClientRect(data => {
						that.formHeight.server = data.top - 33 ;
					})
					.exec();
				const query2 = uni.createSelectorQuery().in(that);
				query2
					.select('#comment2')
					.boundingClientRect(data => {
						that.formHeight.instruction = data.top - 33 ;
					})
					.exec();
				const query3 = uni.createSelectorQuery().in(that);
				query3
					.select('#comment3')
					.boundingClientRect(data => {
						that.formHeight.evaluation = data.top - 33 ;
					})
					.exec();
			},1500);
			
		},
		// 滑动到指定位置
		goSliding(top, selectBom) {
			this.selectBom = selectBom;
			uni.pageScrollTo({
				scrollTop: top,
				duration: 300
			});
		}
	}
};
</script>

<style scoped lang="scss">
.box {
	background-color: white;
	font-family: PingFang SC;
}
.select {
	padding: 0 !important;
	font-family: PingFang SC;
	// overflow: auto;
}
.card_bj {
	width: 100%;
	margin: auto;
	height: 176rpx;
	margin-bottom: 40rpx;
}
.card_text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #979797;
	font-size: 20rpx;
	line-height: 35rpx;
}
.car_but {
	text-align: center;
	line-height: 48rpx;
	width: 134rpx;
	height: 48rpx;
	position: absolute;
	bottom: 50rpx;
	right: 20rpx;
	border-radius: 32rpx;
	font-size: 30rpx;
	color: white;
	background: linear-gradient(139deg, #ffa63b 0%, #ff6600 100%);
	box-shadow: 0px 5px 5px rgba(255, 168, 37, 0.39);
}
.isSelect {
	background: #fff9e2;
	border: 1px solid #d6aa00;
}
.noSelect {
	background: #ffffff;
	border: 1px solid #d0d0d0;
}
.addbold {
	font-weight: bold;
}
.introduce {
	width: 92%;
	margin: auto;
	padding: 34rpx 0rpx 32rpx 0rpx;
}
.taocan {
	display: flex;
	width: 100%;
	margin: auto;
	// margin-top: 58rpx;
	align-items: center;
	justify-content: space-between;
}

.taungou {
	display: flex;
	align-items: center;
}

.taungou image {
	width: 40rpx;
	height: 40rpx;
}

.taungou text {
	padding-left: 6rpx;
	font-size: 38rpx;
	color: #3f3f3f;
	font-weight: 400;
}

.danbao {
	display: flex;
	align-items: center;
	color: #9393aa;
	font-size: 26rpx;
}

.pingtai {
	// margin-right: 36rpx;
	display: flex;
	align-items: center;
}
.getCodeView {
	display: inline-block !important;
	padding: 0 !important;
	width: 42rpx !important;
	margin-right: 0;
	height: 42rpx;
	line-height: 36rpx;
	padding-right: 0rpx;
	z-index: 11;
	opacity: 0;
	position: absolute;
	left: 0;
}
.pingtai image {
	width: 25rpx;
	height: 25rpx;
}

.pingtai text {
	padding-left: 10rpx;
}
.pjList {
	display: flex;
	margin-top: 24rpx;
}

.curser {
	display: flex;
	align-items: center;
}

.curser image {
	width: 94rpx;
	height: 94rpx;
	border-radius: 50%;
}

.yonghu {
	margin-left: 26rpx;
}

.yonghu text {
	color: #f29423;
}

.yonghu_nam {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.yonghu_mcs {
	color: #363636;
	font-size: 30rpx;

	width: 45%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.yonghu_data {
	font-size: 26rpx;
	color: #9393aa;
	font-weight: 500;
	width: 55%;
	text-align: right;
}

.pingyu {
	margin-top: 26rpx;
	color: #9393aa;
	font-size: 26rpx;
}

.pircture {
	display: flex;
	padding: 32rpx 0 0 0;
}

.pircture view {
	padding-right: 24rpx;
}

.pircture image {
	width: 152rpx;
	height: 158rpx;
}
.foot {
	position: fixed;
	z-index: 99;
	background-color: #ffffff;
	bottom: 0;
	width: 100%;
	font-size: 26rpx;
	color: #707070;
	border-top: 1rpx solid #DFDFDF;
}
.boxs {
	text-align: center;
	margin-top: 23rpx;
	width: 40rpx;
	height: 36rpx;
	display: inline-block;
	position: relative;
}

.boxs image {
	position: absolute;
	left: 0;
	width: 46rpx;
	height: 46rpx;
	z-index: 10;
}
.buttons {
	// width: 28rpx;
	// height: 19rpx;
	background: none;
	color: #707070;
	height: 36rpx;
	line-height: 36rpx;
	padding: 0;
	font-size: 26rpx;
}

.buttons::after {
	border: none;
}
.call {
	width: 458rpx;
	height: 82rpx;
	background-color: #FCC800;
	color: #333333;
	font-size: 34rpx;
	line-height: 78rpx;
	border-radius: 12rpx;
	text-align: center;
}
</style>
